<template>
  <div class="loading">
    <div class="load">
      <img class="loading_img" src="../../assets/images/loading.svg" alt="" />
      <p class="text">拼命加载中 {{ x }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      x: ".",
      timeId: null,
    };
  },
  created() {
    this.timeId = setInterval(() => {
      this.load();
    }, 700);
  },
  destroyed() {
    clearInterval(this.timeId);
  },
  methods: {
    load() {
      this.x = this.x == "..." ? "." : this.x + ".";
    },
  },
};
</script>
<style lang="less" scoped>
.loading {
  width: 100%;
  height: 100%;
  text-align: center;
  position: relative;
}
.load {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  img {
    width: 300px;
    height: 300px;
  }
  .text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 22px;
    color: #000000;
  }
}
</style>